<template>
    <div>
        <div class="content">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-form-item label="头像">
                    <div class="userImage">
                        <el-avatar style="margin-right: 15px;" :src="userImage"></el-avatar>
                        <div class="upload">
                            <el-upload list-type="picture-card" :action="uploadUrl" :on-change="handleChanged" arrent="*"
                                :auto-upload="false" multiple :limit="1" :file-list="fileList">
                                <i class=" el-icon-upload"></i>
                            </el-upload>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="用户名" prop="field101">
                <el-input v-model="formData.field101" placeholder="请输入用户名" clearable prefix-icon='el-icon-user'
                    :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="账号/手机号" prop="mobile">
                <el-input v-model="formData.mobile" placeholder="请输入账号或手机号" :maxlength="11" show-word-limit clearable
                    prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="生日" prop="field106">
                <el-date-picker v-model="formData.field106" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
                </el-form-item>
                <el-form-item label="用户简介" prop="field103">
                <el-input v-model="formData.field103" type="textarea" placeholder="请输入用户简介"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="个人主页" prop="field107">
                <el-input v-model="formData.field107" placeholder="请输入个人主页的url" clearable prefix-icon='el-icon-files'
                    :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item size="large">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import Axios from 'axios';
export default {
    components: {},
    props: [],
    data() {
        return {
            files: [],//要上传的文件对象
            fileList: [],
            oldImage:sessionStorage.getItem("userImage"),
            uploadUrl: "",
            localhost: this.global.localhost,
            userId: sessionStorage.getItem("id"),
            userImage:sessionStorage.getItem("image"),
            formData: {
                field101: '小刘.',
                mobile: '',
                field106: null,
                field103: undefined,
                field107: undefined,
                },
                rules: {
                field101: [],
                mobile: [{
                    pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                    message: '手机号格式错误',
                    trigger: 'blur'
                }],
                field106: [],
                field103: [],
                field107: [{
                    required: true,
                    message: '请输入个人主页的url',
                    trigger: 'blur'
                }],
                },
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        handleChanged(file) {
            this.files = file.raw;
            // console.log("***********");
            // console.log(this.files);
        },
        submitUpload() {
            var that = this;
            let formData = new FormData();
            formData.append("file", this.files);
            // console.log(formData);
            Axios({
                method: 'post',
                url: this.localhost + "/uploadImg",
                // url:'https://clubajax.autohome.com.cn/Upload/UpImageOfBase64New?dir=image&cros=autohome.com.cn',
                data: formData,
            }).then(async function (response) {
                // console.log(response.data);
                that.userImage = response.data;
                var url=that.userImage.toString();
                await Axios({
                url: that.localhost + '/users/updateImage',
                // url:'https://clubajax.autohome.com.cn/Upload/UpImageOfBase64New?dir=image&cros=autohome.com.cn',
                method: 'get',
                params:{
                    imageUrl:that.userImage,
                    id:that.userId
                }
                }).then(
                    function (res) {
                        console.log(res);
                        if(res.data){
                            that.$notify({
                                title: '修改成功',
                                message: '当您下次登录时信息将会同步',
                                type: 'success'
                            });
                        }else{
                            that.$notify.error({
                                title: '修改失败',
                                message: '请检查信息是否有误'
                            });
                        }
                    }
                ).catch(function (res) {
                    console.log(res);
                });
                console.log("userImage:" + that.userImage);
            }).catch(function (res) {
                console.log(res);
            })
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
            if (!valid) return
            // TODO 提交表单
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
    },
    created() {
    },
    computed: {
    },
}
</script>
<style scoped>
.el-form /deep/ .el-form-item__label{
    height: 100%;
    display: flex;
    justify-content: center;
}
.submit {
    display: flex;
    margin-top: 15px;
}

.content {
    flex-direction: column;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50px;
    display: block;
}

.upload /deep/ .el-upload-list__item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.upload /deep/ .el-upload-list {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 50%;
}

.upload div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-upload-list__item-actions {
    width: 50px;
    height: 50px;
}

.content {
    display: flex;
}

.upload {
    display: flex;

}

.file {
    width: 50px;
}

.el-upload-list__item-thumbnail {
    width: 50px;
    height: 50px;
}

.el-upload .el-upload div img {
    width: 50px;
    height: 50px;
}

.upload /deep/ .el-upload {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload /deep/ .el-dialog {
    width: 50px;
    height: 50px;
}

.userImage p {
    margin-right: 15px;
}

.userImage {
    display: flex;
    align-items: center;
}

.el-upload__tip {
    float: right;
    margin-left: 15px;
    color: rgb(204, 148, 27);
}
</style>